<template>
<div >
      <el-row class="home" :gutter="10"  style="margin:0 0 0 30px"> 
          <el-col :span="8" style="margin-top:20px">
            <el-card shadow="hover" style="margin-left:20px">
                <div class="user">
                  <img :src="userImg"/>
                  <div class="userinfo">
                    <p class="name">Admin</p>
                    <p class="access">超级管理员</p>
                  </div>
                </div>
                <div class="login-info">
                  <p>上次登录时间：<span>2021-2-22</span></p>
                  <p>上次登录地点：<span>广州</span></p>
                </div>
            </el-card>
            <el-card style="margin-top:20px;height:355px;margin-left:20px">
              <el-table :data="tableData">
                <el-table-column
                v-for="(val,key) in tableLabel"
                :key="key"
                :prop="key"
                :label="val">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col style="margin-top:20px;display:flex;float:left;" :span="16">
            <div class="num" style="width:100%; ">
              <el-card v-for="item in countData "   
              :key="item.name" style="display:flex;float:left;margin:10px 0 20px 15px;width:30% ;" :body-style="{padding:0}">
              <div style="display:flex;float:left;padding:0"> 
                <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}" 
                style="width:100px;text-align:center;line-height:100px;font-size:30px;margin-right:20px;"> </i>
              <div class="detail">
                <p class="num" style="font-weight:500;font-size:30px ;margin-top:20px">￥{{item.value}}</p>
                <p class="txt" style="margin-top:-30px;">{{item.name}}</p>
              </div>
              </div>
            
              </el-card>
            </div>
        
          </el-col>
          <el-col :span="15">
              <div class="data-view">
                    <el-card>
                        <div id="main1"></div>
                    </el-card>
                  </div>   
          </el-col>
    </el-row>
</div>
    
</template>

<script>
export default {
    /*eslint-disable*/
    name:"Home",
    data() {
        return {
            userImg:require("../../src/assets/ee.png"),
            tableData:[
              {name:'大米',
              todayBuy:60,
              monthBuy:240,
              totalBuy:240
              },
              {name:'水果',
              todayBuy:15,
              monthBuy:120,
              totalBuy:120
              },
              {name:'蔬菜',
              todayBuy:6,
              monthBuy:60,
              totalBuy:60
              },
              {name:'饮料',
              todayBuy:80,
              monthBuy:300,
              totalBuy:300
              },
              {name:'零食',
              todayBuy:50,
              monthBuy:400,
              totalBuy:400
              },
              {name:'衣服',
              todayBuy:100,
              monthBuy:500,
              totalBuy:500
              },
            
            ],
            tableLabel:{
              name:"项目",
              todayBuy:"今日花费",
              monthBuy:"本月花费",
              totalBuy:"总额"
            },
            countData:[
              {
                name:"今日支付订单",
                value:1234,
                icon:"success",
                color:"#2ec7c9"
              },
              {
                name:"今日收藏订单",
                value:1234,
                icon:"star-on",
                color:"#ffb980"
              },
              {
                name:"今日未支付订单",
                value:1234,
                icon:"s-goods",
                color:"#5ab1ef"
              },
              {
                name:"本月支付订单",
                value:1234,
                icon:"success",
                color:"#2ec7c9"
              },
              {
                name:"本月收藏订单",
                value:1234,
                icon:"star-on",
                color:"#ffb980"
              },
              {
                name:"本月未支付订单",
                value:1234,
                icon:"s-goods",
                color:"#5ab1ef"
              },
            ]
        }
},

mounted(){
    // 基于准备好的dom，初始化echarts实例
    var myChart =this.$echarts.init(document.getElementById('main1'))
    myChart.setOption({
        title:{
            text:"日常花费项目",
        },
        tooltip:{ trigger: 'axis'},
        xAxis:{
            data:["大米","水果","蔬菜","饮料","零食","衣服"]
        },
        yAxis:{},
        series:[{
            name:"money",
             type: 'line',
            data:[240,120,60,300,400,500]
        }]

    })

}
}
</script>

<style lang="less" scoped>
el-row {
 margin-left: 30px;
}

 .user {
   display: flex;
   border-bottom: 1px solid rgb(216, 215, 215);
   padding-bottom: 20px;
   margin-bottom: 30px;
   img{
   width: 140px;
   height: 140px;
   border-radius: 50%;
   margin-right: 30px;
 }
 .name{
   font-size: 35px;
 }
 .access{
   margin-top: -35px;
   color: rgb(158, 154, 154);
   font-size: 16px;
 }
.num{
  el-card__body{
    padding: 0 ;
  }
}

 }

  .data-view{
        width: 790px;
        margin-left: 20px;
        display: flex;
        justify-content: space-between;
        .el-card{
            width: 840px;
            #main1{
                height: 370px;
            }
        }
    }
 
</style>